<template>
  <div class="upload-box">
    <el-upload
      v-loading="loading"
      :action="action"
      :accept="accept"
      :before-upload="beforeUpload"
      :on-progress="onProgress"
      :on-preview="onPreview"
      :on-exceed="hendleExceed"
      :before-remove="beforeRemove"
      :on-remove="onRemove"
      :on-success="onSuccess"
      :on-error="onError"
      :multiple="multiple"
      :limit="limit"
      :file-list="fileList"
      class="avatar-uploader"
      list-type="picture-card">
      <i class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible" append-to-body>
      <img :src="dialogImageUrl" width="100%" alt="">
    </el-dialog>
  </div>
</template>


<script>
export default {
  props: {
    // 上传地址
    action: {
      type: String,
      default: '/entwebcc/base/certificatepathUpload.do'
    },
    // 接受文件类型
    accept: {
      type: String,
      default: '.jpg,.jpeg,.png'
    },
    // 上传文件大小
    size: {
      type: Number,
      default: 2
    },
    // 是否可以多选
    multiple: {
      type: Boolean,
      default: true
    },
    // 上传文件数量
    limit: {
      type: Number,
      default: 1
    },
    // 文件list
    urlList: {
      type: Array,
      default: () => []
    },
  },
  data () {
    return {
      loading: false,
      fileList: [],
      dialogImageUrl: '',
      dialogVisible: false
    };
  },
  watch: {
    urlList: {
      handler(newVal, oldVal) {
        console.log(newVal, 'newVal');
        this.fileList = newVal;
      },
      immediate: true
    },
  },
  methods: {
    imageFormat(file) {
      const extension = file.name.substring(file.name.lastIndexOf('.'));
      const fileType = this.accept.split(',');
      return this.accept ? fileType.indexOf(extension) === -1 : false;
    },
    // 上传之前
    beforeUpload (file) {
      const formatFlag = this.imageFormat(file);
      const sizeFlag = file.size / 1024 / 1024 < this.size;
      // 限制图片格式
      if (formatFlag) {
        this.$message.warning('上传图片格式不符合，请重新上传！');
        return false;
      }
      if (!sizeFlag) {
        this.$message.error(`上传图片大小不能超过 ${this.size}MB!`);
        return false;
      }
    },
    // 上传时
    onProgress() {
      this.loading = true;
    },
    // 预览
    onPreview(file) {
      console.log(file, 'onPreview');
      this.dialogImageUrl = file.url || file.response.data.url;
      this.dialogVisible = true;
    },
    // 上传限制
    hendleExceed(file, fileList) {
      if (fileList.length >= this.limit) return this.$message.error(`最多允许上传${this.limit}张图片`);
    },
    // 移除之前
    beforeRemove(file, fileList) {
      if (this.imageFormat(file)) {
        return true;
      } else {
        return new Promise((resolve, reject) => {
          this.$confirm('删除', `确认删除吗`, () => {
            resolve(true);
          }, () => {
            reject(false);
          });
        });
      }
    },
    // 移除
    onRemove(file, fileList) {
      this.fileList = fileList;
      this.$emit('uploadSuccess', fileList);
    },
    // 上传成功
    onSuccess(res, file, fileList) {
      console.log(res, file, fileList, 'onSuccess');
      this.loading = false;
      this.fileList.push(file);
      this.$emit('uploadSuccess', this.fileList);
    },
    // 上传失败
    onError(res, file, fileList) {
      console.log(file, 'onError');
      this.loading = false;
      this.$message.error('上传失败');
    }
  }
};
</script>

<style lang="scss">
  .upload-box {
  }
  .avatar-uploader {
    .el-upload {
      width: 120px;
      height: 120px;
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .avatar {
      width: 100%;
      height: 100%;
      display: block;
    }
    .el-upload-list__item {
      width: 120px;
      height: 120px;
    }
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
</style>
